
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="author" content="">
    <script src="/public/admin/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="/public/admin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <link href="/public/admin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>原创小说客服系统</title>

    <!-- Bootstrap Core CSS -->
   

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    
    <div class="panel panel-default">
      <div class="panel-heading">客服咨询系统---客服版本</div>
      <div class="panel-body" style="padding-bottom:0px;padding-top:0px;background:#E8EDF9">
        <div class="row">
            <div class="col-lg-9" style="background:#EEE;">
               <div class="row">
                    <div class="col-lg-12">
                        <!-- <div class="col-lg-10" style="padding-left:0px;padding-right:0px">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                        <div class="col-lg-2" style="padding-right:0px;margin-top:6px">
                            <button type="button" class="btn btn-primary btn-lg" style="height: 60px;width: 160px;">发送</button>
                        </div> -->
                        <div style="border:1px solid #6F90CA;height:420px;margin-bottom: 20px;">
                            <div id="dialogue" style="padding:10px;overflow:auto;height:420px;">

                              <div style="clear:both"></div>   
                            </div>
                        </div>
                       
                    </div>
               </div>


               <!-- 对话模板开始 -->
                   <!--  <div id="left" >
                        <img src="/public/home/images/detail/noavatar_small.gif" alt="..." class="img-circle">
                        <span class="label label-success" style="padding-top:10px;padding-bottom:10px;height:auto;">Successascascasdvsdvasdcasasvsdvbdfnghmhjmrfgjmghm</span>
                    </div>
                    <div id="right" style="display:none">
                        <img src="/public/home/images/detail/noavatar1_small.jpg" alt="..." class="img-circle" style="float:right;margin-left:5px;">
                        <span class="label label-success" style="padding-top:10px;padding-bottom:10px;height:auto;float:right;">Successascascasdvsdvasdcasasvsdvbdfnghmhjmrfgjmghm</span>
                        <div style="clear:both;"></div>
                    </div> -->
                    <div id="left"></div>
                    <div id="right"></div>
               <!-- 对话模板结束 -->
               <div class="row">
                    <div class="col-lg-12">
                        <form action="" method="">
                            <div style="border:1px solid #6F90CA;">
                                <div class="col-lg-10" style="padding-left:0px;padding-right:0px">
                                    <textarea class="form-control" style="height:80px;resize:none;" name="talk" id="talk"></textarea>
                                </div>
                                <div class="col-lg-2" style="padding-right:0px;margin-top:6px">
                                    <button type="button" class="btn btn-primary btn-lg" style="height: 60px;width: 145px;" onclick="sendinfo()">发送</button>
                                </div>
                                <div style="clear:both;"></div>
                            </div>
                        </form>
                    </div>
               </div>
            </div>
            <div class="col-lg-3 hidden-md hidden-sm hidden-xs" style="height:520px;border:1px solid #6F90CA">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        客服使用版本
                    </div>
                    <div class="panel-body">
                        <ul class="list-group">
                          <li class="list-group-item">IP地址：<?php echo $_SERVER["REMOTE_ADDR"]?></li>
                          <li class="list-group-item">当前时间：<?php echo date('Y-m-d H:i:s',time())?></li>
                          <li class="list-group-item">欢迎访问红薯中文网</li>
                         
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
      </div>
    </div>
<script type="text/javascript">
    function sendinfo()
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        //获取输入框内容
        var t = $('#talk').val();
        if(t == ''){
            alert('请输入内容');
            return;
        }
        //post方式发送ajax请求
         // var time = new Date().getTime();
        $.post("/home/kefuer/ajax",{a:t,i:1},function(data){
             if(data == 1){
               $('#talk').val('发送成功');    
            }
        },'json')
    }

    setInterval(function(){getinfo()}, 1000); 
    doAjaxPolling();

    function doAjaxPolling()
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        //获取输入框内容
        // var t = $('#talk').val();
        //post方式发送ajax请求
         // var time = new Date().getTime();

       $.ajax({
         url: "/home/kefu/getcon",
         type:'post',
         dataType:'json',
         async:true,
         timeout: 1000*60,
         success: function(data){

               var add = data;
                $('#dialogue').empty();
                for (var i = 0; i < add.length; i++) {

                        if(add[i]['speaker_id'] == 1){
                            var ht = "<img src='/public/home/images/detail/noavatar_small.gif' alt='...' class='img-circle'><span class='label label-success' style='padding-top:10px;padding-bottom:10px;height:auto;'>"+add[i]['content']+"</span>";

                            var l = $('#left').clone().html(ht);
                        }else{
                            var ht = " <img src='/public/home/images/detail/noavatar1_small.jpg' alt='...' class='img-circle' style='float:right;margin-left:5px;'><span class='label label-success' style='padding-top:10px;padding-bottom:10px;height:auto;float:right;'>"+add[i]['content']+"</span><div style='clear:both;'></div>";

                            var l = $('#right').clone().html(ht);
                        }
                        $('#dialogue').append(l);
                    };
         
         },
         complete: function(){
             setTimeout(function(){doAjaxPolling()},1000);
         },
         error: function(){
             setTimeout(function(){doAjaxPolling()},1000);
         }
       });


    }
</script>
</body>

</html>
